<template>
  <div>
    <CommonSearch
      :config="searchConfig"
      v-model="tableConfig.searchParams"
    ></CommonSearch>
    <CommonTable :config="tableConfig" ref="commonTable">
      <template #status="{ row }">
        <el-tooltip
          :content="`状态:${row.status == 1 ? '启用' : '禁用'}`"
          placement="top"
        >
          <el-switch
            @click="handlerStatus(row)"
            :value="row.status"
            active-color="#13ce66"
            inactive-color="#dcdfe6"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-tooltip>
      </template>
    </CommonTable>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
import { CREATE, UPDATE, DELETE, QUERY } from '@/utils/Const';
import {
	getDeptListApi,
	createDeptApi,
	updateDeptApi,
	deleteDeptApi
} from '@/api/system.api';
import { listToMenu } from '@/utils/tools';
import { patternMobile, patternEmail, noNumberToNull } from '@/utils/validate';

export default {
	name : 'Department',
	setup () {
		let Instance = getCurrentInstance().proxy;
		let commonTable = null;
		let reeselectData = ref([]);
		let data = reactive({
			searchConfig : {
				handlerSearch () {
					return commonTable.fetchData();
				},
				form : [
					{
						type : 'text',
						label : '部门名称:',
						placeholder : '请输入部门名称',
						key : 'deptName'
					},
					{
						type : 'select',
						label : '状态:',
						placeholder : '请选择状态',
						key : 'status',
						options : [
							{
								value : '1',
								label : '正常'
							},
							{
								value : '0',
								label : '停用'
							}
						]
					}
				]
			},
			tableConfig : {
				searchParams : {},
				hasPage : false,
				expandAll : true,
				reqApiMethod : getDeptListApi,
				responseHandler : (payload) => {
					let list = listToMenu({ list : payload.list, idKey : 'deptId' });
					reeselectData.value = list;
					return { list };
				},
				handlerOperate : (payload, row) => {
					data.formConfig.type = payload.butType;
					let formConfig = {
						data : Array.isArray(row) ? row[0] : '',
						...data.formConfig
					};
					formConfig.form[1].hide = false;
					formConfig.form[1].disabled = false;
					switch (payload.butType) {
					case CREATE:
						// 新增顶级部门
						formConfig.form[1].hide = true;
						Instance.$hyDialogForm(formConfig);
						break;
					case 'CREATE_ITEM':
						formConfig.form[1].disabled = true;
						// 新增下级部门
						formConfig.data = {
							parentId : formConfig.data.deptId
						};
						Instance.$hyDialogForm(formConfig);
						break;
					case DELETE:
						Instance.$hyConfirm({
							subTitle : `是否确定删除【${row[0].deptName}】`,
							callback : async (done) => {
								await deleteDeptApi(row[0].deptId);
								done();
								commonTable.fetchData();
							}
						});
						break;
					case UPDATE:
						if (formConfig.data.parentId == 0) {
							formConfig.form[1].hide = true;
						} else {
							formConfig.form[1].disabled = true;
						}
						Instance.$hyDialogForm(formConfig);
						break;
					case QUERY:
						if (formConfig.data.parentId == 0) {
							formConfig.form[1].hide = true;
						} else {
							formConfig.form[1].disabled = true;
						}
						formConfig.disabled = true;
						Instance.$hyDialogForm(formConfig);
						break;
					}
				},
				mergeTable : () => {},
				columns : [
					{
						title : '部门名称',
						field : 'deptName'
					},
					{
						title : '排序',
						field : 'orderNum'
					},
					{
						title : '状态',
						field : 'status'
					},
					{
						title : '创建时间',
						field : 'createTime'
					}
				],
				globalOperate : [
					{
						butType : CREATE,
						name : '新增',
						color : 'primary',
						role : [],
						icon : 'el-icon-plus'
					}
				],
				operateWidth : 230,
				operate : [
					{
						butType : 'CREATE_ITEM',
						type : 'text',
						name : '新增',
						role : [],
						icon : 'el-icon-edit'
					},
					{
						butType : DELETE,
						type : 'text',
						name : '删除',
						role : [],
						icon : 'el-icon-delete'
					},
					{
						butType : UPDATE,
						type : 'text',
						name : '修改',
						role : [],
						icon : 'el-icon-edit'
					},
					{
						butType : QUERY,
						type : 'text',
						name : '查看',
						role : [],
						icon : 'el-icon-search'
					}
				]
			},
			formConfig : {
				type : '',
				async handlerSubmit (params) {
					console.log('params', data.formConfig.type, params);
					switch (data.formConfig.type) {
					case CREATE:
						await createDeptApi(params);
						break;
					case UPDATE:
						await updateDeptApi(params);
						break;
					}
					return commonTable.fetchData();
				},
				form : [
					{
						type : 'text',
						label : '部门Id',
						key : 'deptId',
						hide : true
					},
					{
						type : 'treeselect',
						label : '上级部门',
						placeholder : '请选择上级部门',
						reeselectData : reeselectData,
						dataAdaptiveMap : {
							deptId : 'id',
							deptName : 'label'
						},
						key : 'parentId',
						rules : [
							{ required : true, message : '请选择上级部门', trigger : 'change' },
							{ required : true, message : '请选择上级部门', trigger : 'blur' }
						]
					},
					{
						type : 'text',
						label : '部门名称',
						placeholder : '请输入部门名称',
						maxlength : 30,
						key : 'deptName',
						rules : [
							{ required : true, message : '请输入部门名称', trigger : 'blur' }
						]
					},
					{
						type : 'text',
						label : '显示排序',
						placeholder : '请输入显示排序',
						key : 'orderNum',
						maxlength : 2,
						handlerLimiting : (val) => {
							return noNumberToNull(val);
						},
						rules : [
							{ required : true, message : '请输入显示排序', trigger : 'blur' }
						]
					},
					{
						type : 'text',
						label : '负责人',
						placeholder : '请输入负责人',
						maxlength : 10,
						key : 'leader'
					},
					{
						type : 'text',
						label : '联系电话',
						placeholder : '请输入联系电话',
						maxlength : 11,
						key : 'phone',
						rules : [
							{
								pattern : patternMobile,
								message : '请输入正确的手机号码',
								trigger : 'blur'
							}
						]
					},
					{
						type : 'text',
						label : '邮箱',
						placeholder : '请输入邮箱',
						maxlength : 50,
						key : 'email',
						rules : [
							{
								pattern : patternEmail,
								message : '请输入正确的邮箱',
								trigger : 'blur'
							}
						]
					},
					{
						type : 'radio',
						label : '部门状态:',
						key : 'status',
						defaultValue : '1',
						options : [
							{
								value : '1',
								label : '正常'
							},
							{
								value : '0',
								label : '禁用'
							}
						]
					}
				]
			}
		});

		onMounted(() => {
			commonTable = Instance.$refs['commonTable'];
		});

		const handlerStatus = (row) => {
			let { status, deptName } = row;
			Instance.$hyConfirm({
				subTitle : `是否${status == 0 ? '启用' : '禁用'}【${deptName}】`,
				callback : (done) => {
					done();
					row.status = !status;
					commonTable.fetchData();
				}
			});
		};

		return {
			handlerStatus,
			...toRefs(data)
		};
	}
};
</script>

<style lang="scss" scoped></style>
